<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-2.1.1.min.js"></script>


    <link rel="stylesheet" href="/js/easyui1.5/themes/icon.css">
    <link rel="stylesheet" href="/js/easyui1.5/themes/default/easyui.css">
    <script src="/js/easyui1.5/jquery.easyui.min.js"></script>
</head>

<script type="text/javascript"  th:inline="none">


    $(function () {
        $('#add_div').dialog('close');
        getUser();
    })


    function getUser(){


        $("#dg").datagrid({

            url:'/user/queryUser?state=0',
            striped:true,
            pagination:true,
            toolbar:"#gongneng",
            pageList:[1,2,3,4,5,7,10],
            pageSize:5,
            checkOnSelect:false,
            columns:[[
                {field:'xxx',title:'xx',width:100,checkbox:true},
                {field:'img',title:'头像',width:100,
                    formatter:function(value,row,index){
                        return "<img width='77' src='"+value+"'>";
                    }
                },
                {field:'userAccout',title:'账号',width:100},
                {field:'nickName',title:'昵称',width:100,editor:'text' },
                {field:'userPwd',title:'密码',width:100,editor:'text'},
                {field:'userSex',title:'性别',width:100,
                    formatter:function(value,row,index){

                        if(value==1){
                            return "男";
                        }else if(value==2){

                            return "女";
                        }
                        return "";
                    }
                },
                {field:'grade',title:'等级',width:100,align:'center'},
                {field:'addTime',title:'创建时间',width:100 },
                {field:'phone',title:'手机号',width:100},
                {field:'xsxs',title:'操作',width:200,
                    formatter:function(value,row,index){
                        var content = " <a href='JavaScript:delUser("+row.userId+")' >删除</a> ";
                        content += " <a href='JavaScript:queryUserById("+row.userId+")' >修改</a> ";
                        content += " <a href='JavaScript:updateUserState("+row.userId+")' >恢复</a> ";
                        return content;
                    }
                }
            ]]

        })
    }

    function updateUserState(id) {

        $.ajax({
            url:"/user/updateUserState",
            type:"POST",
            data:{userId:id,state:1},
            success:function(pageUtil){
                getUser();
            },
            error:function(){
                alert("失败了");
            }
        })

    }


    function queryUserById(id) {

        $("#user-from").form("clear");

        $.ajax({
            url:"/user/queryUserById",
            type:"POST",
            data:{id:id},
            success:function(result){
                $('#add_div').dialog('open');
                $("#testimg").attr("src","/js/images/"+result.img);
                $("#user-from").form('load',result);

            },
            error:function(){
                alert("失败了");
            }
        })
    }

    function setEvent(){

        var rows = $("#dg").datagrid("getChecked");
        var ids = "";
        $.each(rows,function(index,obj){
            ids += ids==""?obj.userId:","+obj.userId;
        });

        if(ids!=null&&ids!=""){
            delUser(ids);
        }


    }

    function delUser(ids){


        $.ajax({
            url:"/user/delUser",
            type:"POST",
            data:{ids:ids},
            success:function(pageUtil){
                getUser();

                $.messager.show({
                    title:'消息',
                    msg:'删除成功!!',
                    timeout:5000,
                    showType:'slide'
                });

            },
            error:function(){
                alert("失败了");
            }
        });


    }


    function updateUser(){

        var formData = new FormData($("form")[0]);

        $.ajax({

            url:"/user/updateUser",
            data:formData,
            type:"POST",
            cache: false,
            contentType: false,
            processData: false,
            success:function(result){
                $('#add_div').dialog('close');
                getUser();
            },
            error:function(){
                alert("出错啦!!!");
            }
        })

    }



</script>


<body>

<div id="gongneng">
    <a href="JavaScript:void(0)" onclick="setEvent()" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"></a>
</div>
<table id="dg" fit="true"></table>
<div id="add_div"  class="easyui-dialog" title="新增用户" style="width:600px;height:300px"
     data-options="iconCls:'icon-save',resizable:true,modal:true,
			buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					 updateUser()//调用另一个方法
				}
			},{
				text:'关闭',
				iconCls:'icon-no',
				handler:function(){
				   $('#add_div').dialog('close');
				}
			}]">

    <form id="user-from">
        <input type="hidden" name="userId">

        <table>
            <tr>
                <td>账号</td>
                <td><input name="userAccout"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input name="userPwd"></td>
            </tr>
            <tr>
                <td>昵称</td>
                <td><input name="nickName"></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input name="userAge"></td>
            </tr>
            <tr>
                <td>手机号</td>
                <td><input name="phone"></td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" name="fileName">
                    <input type="hidden" name="img">
                    <img id="testimg">
                </td>
            </tr>
        </table>
    </form>


</div>

</body>
</html>